<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>zpdf模块开发使用指南</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            min-height: 100vh;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            color: #2c3e50;
            line-height: 1.6;
            background-color: #f8f9fa;
        }

        /* 侧边栏样式 */
        .sidebar {
            width: 260px;
            background-color: #ffffff;
            padding: 24px;
            position: fixed;
            height: 100vh;
            box-shadow: 2px 0 8px rgba(0,0,0,0.05);
            overflow-y: auto;
        }

        .sidebar h2 {
            color: #1a73e8;
            font-size: 1.25rem;
            margin-bottom: 24px;
            padding-bottom: 12px;
            border-bottom: 2px solid #e8eaed;
        }

        .sidebar a {
            display: block;
            padding: 12px 16px;
            margin-bottom: 8px;
            text-decoration: none;
            color: #5f6368;
            border-radius: 8px;
            transition: all 0.3s ease;
            font-weight: 500;
            cursor: pointer;
        }

        .sidebar a:hover {
            background-color: #f1f3f4;
            color: #1a73e8;
        }

        .sidebar a.active {
            background-color: #e8f0fe;
            color: #1a73e8;
        }

        /* 内容区域样式 */
        .content {
            padding: 40px 60px;
            margin-left: 260px;
            max-width: 1200px;
            background-color: #ffffff;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            min-height: 100vh;
        }

        .content h1 {
            font-size: 2.5rem;
            color: #1a73e8;
            margin-bottom: 32px;
        }

        .content h2 {
            font-size: 1.75rem;
            color: #202124;
            margin: 40px 0 20px;
            padding-bottom: 8px;
            border-bottom: 2px solid #e8eaed;
        }

        .content h3 {
            font-size: 1.25rem;
            color: #202124;
            margin: 24px 0 16px;
        }

        /* 代码块样式 */
        pre {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            overflow-x: auto;
            margin: 16px 0;
            border: 1px solid #e8eaed;
        }

        code {
            font-family: 'Fira Code', 'Courier New', monospace;
            font-size: 0.9em;
            color: #37474f;
        }

        /* 内联代码样式 */
        p code, li code {
            background-color: #f1f3f4;
            padding: 2px 6px;
            border-radius: 4px;
            color: #e67c73;
        }

        /* 列表样式 */
        ul {
            padding-left: 24px;
            margin: 16px 0;
        }

        li {
            margin-bottom: 8px;
        }

        /* 段落样式 */
        p {
            margin: 16px 0;
            color: #5f6368;
        }

        /* 平台内容切换样式 */
        .platform-content {
            display: none;
            animation: fadeIn 0.3s ease-in-out;
        }

        .platform-content.active {
            display: block;
        }

        /* 动画效果 */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* API文档特殊样式 */
        .api-item {
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 24px;
            margin: 16px 0;
            border: 1px solid #e8eaed;
        }

        .api-item h3 {
            color: #1a73e8;
            margin-top: 0;
        }

        /* 参数表格样式 */
        .param-table {
            width: 100%;
            border-collapse: collapse;
            margin: 16px 0;
        }

        .param-table th,
        .param-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #e8eaed;
        }

        .param-table th {
            background-color: #f8f9fa;
            font-weight: 500;
            color: #202124;
        }

        /* 响应式设计 */
        @media (max-width: 1024px) {
            .sidebar {
                width: 220px;
            }
            .content {
                margin-left: 220px;
                padding: 30px 40px;
            }
        }

        @media (max-width: 768px) {
            .content {
                padding: 20px;
            }
        }

        /* 添加特色功能的样式 */
        .feature-box {
            background: linear-gradient(145deg, #e8f0fe 0%, #ffffff 100%);
            border-left: 4px solid #1a73e8;
            padding: 24px;
            border-radius: 8px;
            margin: 24px 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .feature-box h3 {
            color: #1a73e8;
            margin-top: 0;
            margin-bottom: 16px;
        }

        .feature-box ul {
            margin-bottom: 0;
        }

        .feature-box li {
            color: #3c4043;
            margin-bottom: 12px;
        }
    </style>
</head>

<body>

    <div class="sidebar">
        <h2>导航</h2>
        <a onclick="switchPlatform('android')" class="active">安卓开发指南</a>
        <a onclick="switchPlatform('harmony')">鸿蒙开发指南</a>
    </div>

    <div class="content">
        <h1>zpdf模块开发使用指南</h1>

        <!-- 安卓平台内容 -->
        <div id="android-content" class="platform-content active">
            <h2>安卓开发指南</h2>
            <p>zpdf模块是一个用于安卓平台的SDK，提供创建、预览和导出PDF文件的功能。其最大特色是提供所见即所得的PDF预览，并通过智能分页算法确保文字段落和图片在PDF分页时不会被截断。用户可以自定义页面大小、边距，并自由添加文字和图片。</p>

            <h2>核心特色</h2>
            <div class="feature-box">
                <h3>智能分页</h3>
                <ul>
                    <li>实时预览：所见即所得的PDF预览功能，确保导出效果与预览完全一致</li>
                    <li>智能切割：自动识别文字段落和图片边界，确保内容在分页时不会被截断</li>
                    <li>段落完整性：自动将完整段落移至下一页，保持阅读连贯性</li>
                    <li>图片处理：确保图片在分页时保持完整，自动调整位置避免跨页显示</li>
                </ul>
            </div>

            <h2>功能</h2>
            <ul>
                <li>创建PDF文档</li>
                <li>实时预览PDF文档（所见即所得）</li>
                <li>智能分页处理，确保文字段落和图片完整性</li>
                <li>导出PDF文档</li>
                <li>配置页面大小和边距</li>
                <li>添加文字和图片</li>
            </ul>

            <h2>使用方法</h2>

            <h3>1. 引入zpdf模块</h3>
            <p>在你的项目根目录里的<code> build.gradle</code> 文件中添加：</p>
            <pre><code>dependencyResolutionManagement {
		repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
		repositories {
			mavenCentral()
			maven { url 'https://jitpack.io' }
		}
	}
            </code></pre>

            <p>在你的项目中引入zpdf模块，在模块<code>build.gradle</code>文件中添加依赖：</p>
            <pre><code>implementation 'com.gitee.z_joker1994:zpdf:v1.0.4'//zpdf核心模块<br/>implementation 'com.github.bumptech.glide:glide:4.15.0'  // 添加 Glide 依赖<br/>annotationProcessor 'com.github.bumptech.glide:compiler:4.15.0'  // Glide 编译器，推荐使用
            </code></pre>

            <h3>2. 在布局文件中添加PDFView</h3>
            <p>在你的布局文件中添加PDFView组件：</p>
            <pre><code>
&lt;cn.darkbox.sdk.zpdf.PDFView
    android:id="@+id/pdfView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" /&gt;
</code></pre>

            <h3>3. 初始化和配置PDFView</h3>
            <p>在Activity或Fragment中初始化PDFView并进行基本配置：</p>
            <pre><code>
// 获取PDFView实例
PDFView pdfView = findViewById(R.id.pdfView);

// 配置PDF页面属性
pdfView.setPageSize(200, 200)                          // 设置页面大小
      .setPageColor(Color.BLUE)                        // 设置页面背景色
      .setPagePadding(new Rect(10, 10, 10, 10))       // 设置页面边距
      .setTextStyle(Color.LTGRAY, Utils.sp2px(this, 50));  // 设置文字样式
</code></pre>

            <h3>4. 添加内容</h3>
            <p>向PDF中添加文字和图片内容：</p>
            <pre><code>
// 添加文字
pdfView.addText("Hello World");  // 使用默认样式
pdfView.addText("Custom Style Text", Color.YELLOW, Utils.sp2px(this, 60));  // 自定义样式

// 添加图片
pdfView.addImage("https://example.com/image.jpg");  // 通过URL添加图片
pdfView.addImage(getDrawable(R.drawable.img1));     // 通过Drawable添加图片
</code></pre>

            <h3>5. 设置回调并预览</h3>
            <p>设置预览回调并显示预览：</p>
            <pre><code>
// 设置预览回调
pdfView.setPreviewCallback(new PDFView.Callback() {
    @Override
    public void onStart() {
        // 预览开始
        Log.d("PDFView", "Preview started");
    }

    @Override
    public void onCompleted() {
        // 预览完成
        Log.d("PDFView", "Preview completed");
    }

    @Override
    public void onError(Throwable throwable) {
        // 发生错误
        Log.e("PDFView", "Preview error", throwable);
    }
});

// 显示预览
pdfView.showOrUpdate();
</code></pre>

            <h3>6. 导出PDF</h3>
            <p>将PDF导出到文件：</p>
            <pre><code>
// 设置导出路径
String exportPath = new File(getExternalFilesDir(null), "pdf").getAbsolutePath();
File targetFile = new File(exportPath, String.format("pdf_%s.pdf", System.currentTimeMillis()));

// 导出PDF
pdfView.export(targetFile, new PDFView.Callback() {
    @Override
    public void onStart() {
        // 导出开始
    }

    @Override
    public void onCompleted() {
        // 导出完成
        Toast.makeText(MainActivity.this, "导出成功", Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onError(Throwable throwable) {
        // 导出失败
        Toast.makeText(MainActivity.this, "导出失败", Toast.LENGTH_SHORT).show();
    }
});
</code></pre>

            <h3>7. 重置内容</h3>
            <p>如果需要清除所有内容重新开始：</p>
            <pre><code>
pdfView.reset();  // 清除所有已添加的内容
</code></pre>

            <h3>注意事项</h3>
            <ul>
                <li>在添加内容后，需要调用<code>showOrUpdate()</code>方法才能看到预览效果</li>
                <li>导出PDF时需要确保应用具有写入外部存储的权限</li>
                <li>图片支持网络URL和本地Drawable两种方式添加</li>
                <li>所有设置方法都支持链式调用，可以连续设置多个属性</li>
                <li>文字大小建议使用<code>Utils.sp2px()</code>方法转换，确保在不同设备上显示一致</li>
            </ul>

            <h2>PDFView类API文档</h2>
            
            <h3>1. setPageSize(int width, int height)</h3>
            <p>设置PDF页面的宽度和高度。</p>
            <p><strong>参数：</strong></p>
            <ul>
                <li><code>width</code>: 页面宽度</li>
                <li><code>height</code>: 页面高度</li>
            </ul>
            <p><strong>返回值：</strong>返回PDFView实例，支持链式调用。</p>

            <h3>2. setPagePadding(Rect pagePadding)</h3>
            <p>设置PDF页面的内边距。</p>
            <p><strong>参数：</strong></p>
            <ul>
                <li><code>pagePadding</code>: Android Rect对象，定义页面四周的内边距</li>
            </ul>
            <p><strong>返回值：</strong>返回PDFView实例，支持链式调用。</p>

            <h3>3. setPageColor(int color)</h3>
            <p>设置PDF页面的背景颜色。</p>
            <p><strong>参数：</strong></p>
            <ul>
                <li><code>color</code>: 颜色值，例如Color.WHITE</li>
            </ul>
            <p><strong>返回值：</strong>返回PDFView实例，支持链式调用。</p>

            <h3>4. setTextStyle(int color, int size)</h3>
            <p>设置文本的样式，包括颜色和大小。</p>
            <p><strong>参数：</strong></p>
            <ul>
                <li><code>color</code>: 文本颜色值</li>
                <li><code>size</code>: 文本大小</li>
            </ul>
            <p><strong>返回值：</strong>返回PDFView实例，支持链式调用。</p>

            <h3>5. reset()</h3>
            <p>重置PDFView的所有内容，清除所有已添加的文本和图片。</p>
            <p><strong>返回值：</strong>void</p>

            <h3>6. addText(String text)</h3>
            <p>添加一段文本到PDF中。</p>
            <p><strong>参数：</strong></p>
            <ul>
                <li><code>text</code>: 要添加的文本内容</li>
            </ul>
            <p><strong>返回值：</strong>返回PDFView实例，支持链式调用。</p>

            <h3>7. addImage(String img)</h3>
            <p>添加一张图片到PDF中。</p>
            <p><strong>参数：</strong></p>
            <ul>
                <li><code>img</code>: 图片的路径</li>
            </ul>
            <p><strong>返回值：</strong>返回PDFView实例，支持链式调用。</p>

            <h3>8. addImage(Drawable img)</h3>
            <p>添加一个Drawable对象作为图片到PDF中。</p>
            <p><strong>参数：</strong></p>
            <ul>
                <li><code>img</code>: Android Drawable对象</li>
            </ul>
            <p><strong>返回值：</strong>返回PDFView实例，支持链式调用。</p>

            <h3>9. showOrUpdate()</h3>
            <p>显示或更新PDF预览。在添加内容后调用此方法来更新预览。</p>
            <p><strong>返回值：</strong>void</p>

            <h3>10. setPreviewCallback(Callback previewCallback)</h3>
            <p>设置预览回调接口，用于监听预览过程。</p>
            <p><strong>参数：</strong></p>
            <ul>
                <li><code>previewCallback</code>: 回调接口，包含onStart()、onCompleted()和onError(Throwable)方法</li>
            </ul>
            <p><strong>返回值：</strong>返回PDFView实例，支持链式调用。</p>

            <h3>11. export(File targetFile, Callback callback)</h3>
            <p>将PDF导出到指定文件。</p>
            <p><strong>参数：</strong></p>
            <ul>
                <li><code>targetFile</code>: 目标文件对象</li>
                <li><code>callback</code>: 导出过程的回调接口，包含onStart()、onCompleted()和onError(Throwable)方法</li>
            </ul>
            <p><strong>返回值：</strong>void</p>

            <h3>Callback 接口</h3>
            <p>用于处理预览和导出过程的回调：</p>
            <ul>
                <li><code>onStart()</code>: 开始处理时调用</li>
                <li><code>onCompleted()</code>: 处理完成时调用</li>
                <li><code>onError(Throwable throwable)</code>: 发生错误时调用</li>
            </ul>

            <h2>返回值说明</h2>
            <ul>
                <li><code>export(outputPath)</code>: 返回导出成功与否的布尔值。</li>
            </ul>

            <h2>注意事项</h2>
            <ul>
                <li>确保在<code>AndroidManifest.xml</code>中添加必要的权限，例如读写存储权限。</li>
                <li>在使用预览功能时，确保UI线程中调用相关方法。</li>
            </ul>
        </div>

        <!-- 鸿蒙平台内容 -->
        <div id="harmony-content" class="platform-content">
            <h2>鸿蒙开发指南</h2>
            <p>（此部分预留，待后续补充鸿蒙平台的开发指南内容）</p>
        </div>

        <h2>结论</h2>
        <p>zpdf模块提供了强大的PDF创建和导出功能，用户可以根据需求灵活配置页面和内容。希望本指南能帮助你快速上手使用zpdf模块。</p>
    </div>

    <script>
        function switchPlatform(platform) {
            // 移除所有内容的active类
            document.querySelectorAll('.platform-content').forEach(content => {
                content.classList.remove('active');
            });
            // 移除所有导航链接的active类
            document.querySelectorAll('.sidebar a').forEach(link => {
                link.classList.remove('active');
            });
            
            // 添加active类到选中的内容和导航链接
            document.getElementById(platform + '-content').classList.add('active');
            document.querySelector(`.sidebar a[onclick="switchPlatform('${platform}')"]`).classList.add('active');
        }
    </script>

</body>

</html>